<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link href="https://cdn.bootcss.com/jquery-typeahead/2.11.0/jquery.typeahead.min.css" rel="stylesheet">
  <title>Document</title>
</head>
<body>
  <h1>移动端真机调试</h1>
  <h2>种一棵树最好的时间是十年前，其次是现在</h2>
  <h3>世界经济史是一部基于假象和谎言的连续剧。</h3>
  <div class="example">
      <h2>基本示例</h2>
      <div id="basic-example">
          <input class="typeahead" type="text" placeholder="请输入省份">
      </div>
  </div>
  <script>
      /**
       * 前端全栈
       * devops 
       * project => git => 
       * 
       * 
       * 核心业务需求分析
       *    前端
       *      组件化、工程化、标准化
       *    后端
       *     自动化、模块化、流程化
       * 业务
       *   登录鉴权 => 前后端分离
       *   内容展示
       * 
       * PC端需求分析

          前端技术栈选择
              layui+vue.js+vuex+vue-router
              webapp mint iscroll
          
        yarn
        
        真机调试
          weinre,vconsole

        postman 接口性能测试 

        RESTful API介绍
            Resource-based：资源，即数据
            Representational：某种表现形式，比如JSON，XML，JPG等
            State Transfer：状态变化，通过HTTP动词实现

            特点：客户端-服务端，通过将用户界面，让数据与存储分开，通过简化服务器
            无状态，可缓存，
            1，通过将用户界面，让数据与存储分开，通过简化服务器组件来实现多平台的应用
            2，
        4种常见的接口测试工具对比
        什么是mock数据，mock数据开发介绍

        mock数据
          虚假的数据，
        1，模拟真实接口
          实现效率开发，前后台同步，特别是分布式的系统
        2，虚拟业务场景
          某些开发场景非常难触发，还有一些异常逻辑、交互逻辑

        本地安装接口测试工具



       */
  </script>
  <!-- <script src="https://cdn.bootcss.com/jquery/1.7.1/jquery.min.js"></script>
  <script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>

  <script>
   swal("A wild Pikachu appeared! What do you want to do?", {
      buttons: {cancel: "取消",catch: "确认"},
    }).then((value) => {
      switch (value) {
        case "catch":
          console.log("确认")
          break;
        default:
          console.log("取消")
      }
    });

  
  </script> -->



  <script src="https://cdn.bootcss.com/jquery/3.5.0/jquery.min.js"></script>
  <!-- <script src="https://cdn.bootcss.com/typeahead.js/0.11.1/bloodhound.min.js"></script> -->
  <script src="https://cdn.bootcss.com/typeahead.js/0.11.1/typeahead.bundle.min.js"></script>
  <!-- <script src="https://cdn.bootcss.com/jquery-typeahead/2.11.0/jquery.typeahead.min.js"></script> -->
  <script src="https://cdn.bootcss.com/typeahead.js/0.11.1/typeahead.jquery.min.js"></script>

  <script>
     jQuery(function () {
            /*** 1.基本示例 ***/
            var provinces = ["广东省", "海南省", "山西省", "山东省","湖北省", "湖南省", "陕西省", "上海市", "北京市", "广西省"];

            var substringMatcher = function (strs) {
                return function findMatches(q, cb) {
                    var matches, substrRegex;
                    matches = [];//定义字符串数组
                    substrRegex = new RegExp(q, 'i');
                    //用正则表达式来确定哪些字符串包含子串的'q'
                    $.each(strs, function (i, str) {
                    //遍历字符串池中的任何字符串
                        if (substrRegex.test(str)) {
                            matches.push({ value: str });
                        }
                    //包含子串的'q',将它添加到'match'
                    });
                    cb(matches);
                };
            };

            $('#basic-example .typeahead').typeahead({
                highlight: true,
                minLength: 1
            },
            {
                name: 'provinces',
                displayKey: 'value',
                source: substringMatcher(provinces)
            });

        });
  </script>
</body>
</html>